<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 客户列表</title>
    <link rel="shortcut icon" href="../content/static/img/favicon.ico">
    <link href="../content/css/common_modal.css" rel="stylesheet">
    <link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <style>
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        table tr{ height:40px;}
        .checkbox label, .radio label{
            padding-left: 15px;
        }.search{
            float: left;padding: 0px 10px 0px 0px;
        } 
       .tooltip-inner{
        max-width: 650px;
        text-align: left;
       }
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>供应商管理</a></li>
                        <li><a>供应商列表</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <div class="search-condition">
                        <div>
                            <div class="filter-wrapper">
                                <ul class="clearfix">
                                    <li class="filter-item ">
                                        <label>供应商名称</label>
                                        <div>
                                            <div class="fill-wrapper">
                                                <input name="suppliername" type="text" class="fill-item">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="filter-item ">
                                        <label>供应商编号</label>
                                        <div>
                                            <div class="fill-wrapper">
                                                <input  name="serialNumber" type="text" class="fill-item">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="filter-item ">
                                        <label>联系电话</label>
                                        <div>
                                            <div class="fill-wrapper">
                                                <input id="serialNumber" type="text" class="fill-item">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="filter-item ">
                                        <label>供应商等级</label>
                                        <div>
                                            <select v-select2 id="warehouse">
                                                <option value='0'>全部</option>
                                                <option v-for="item in warehouseList" v-bind:value="item.Value"
                                                    v-bind:selected="$index===0" v-text="item.Text"></option>
                                            </select>
                                        </div>
                                    </li>
                                    <li class="filter-item">
                                        <a class="revision-btn revision-btn-search" v-on:click="searchData(1)">搜索</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn" v-on:click="addShow()">新增</a>
                            <a class="revision-btn" v-on:click="exportShow()">导出</a>&nbsp;&nbsp;
                            <span>总条数：<span>12 条</span></span>
                        </div>
                    </div>
                    <table class="table table-hover table-bordered">
                        <thead style="background: #f5f5f5;">
                            <tr>
                                <th>
                                    <input class="revision-checkbox" type="checkbox" v-model="item.checked">
                                </th>
                                <th>供应商名称</th>
                                <th>
                                    <div class="tooltip-demo">编号
                                        <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                            title="" data-original-title="该客户的唯一编码"></label>
                                    </div>
                                </th>
                                <th>性别</th>
                                <th>联系人</th>
                                <th>应收欠款</th>
                                <th>电话</th>
                                <th>供应商级别</th>
                                <th>关联业务员</th>
                                <th>状态</th>
                                <th style="width: 120px;">操作</th>
                            </tr>
                        </thead>
                        <tbody v-show="result.List.length" style="display: none;">
                            <tr v-for="item in result.List">
                                <td><input class="revision-checkbox" type="checkbox" v-model="item.checked"></td>
                                <td><span v-text="item.supplierName"></span></td>
                                <td><a href="" data-toggle="modal" v-on:click="detailShow(item.id)"><span v-text="item.supplierCode"></span></a></td>
                                <td class="text-navy"><span v-text="item.supplierSex=='0'?'男':'女'"></span></td>
                                <td><span v-text="item.contactName"></span></td>
                                <td class="amount" style="color: #F00;"><span v-text="item.supplierDebt | money"></span></td>
                                <td><span v-text="item.supplierPhone"></span></td>
                                <td><span v-text="item.supplierLevel"></span></td>
                                <td>-</td>
                                <td><span v-text="item.supplierStatus=='0'?'启用':'禁用'" v-bind:class="item.supplierStatus=='0'?'text-navy':'text-danger'"></span></td>
                                <td>
                                    <a href="javascript:;" class="" v-on:click="addShow(item.id)">编辑</a>
                                    <a href="avascript:;" class="" v-on:click="delete(item.id)">删除</a>
                                    <a href="javascript:;">新增销售</a>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot v-show="!result.List.length" style="display:none;">
                            <tr v-show="listLoading">
                                <td colspan="11">
                                    <p class="f-loading" style="height:160px;"></p>
                                </td>
                            </tr>
                            <tr style="display: none;" v-else>
                                <td colspan="11">
                                    <p class="no-result">未查询到相关数据，请尝试更换筛选条件后查询!</p>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="clearfix page-wrap">
                        <paginationbetter v-bind:data-total="pageObj.dataTotal" v-bind:page-number.sync="pageObj.pageNumber"
                            v-bind:page-size="pageObj.pageSize" v-bind:data-number.sync="pageObj.dataNumber"
                            v-bind:ajax-obj="pageObj.ajaxObj"></paginationbetter>
                    </div>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 新增/修改客户 -->
                <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style" v-bind:add-class="addModal.addClass">
                    <h4 slot="header">新增客户
                        <span class="title-tips">创建日期：<span>2018-12-20 14:40:58</span></span>
                        <span class="title-tips">创建人：<span>当前登陆人</span></span>
                    </h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <h3 class="panel-title">基本信息
                                <span class="title-tips">注：单个销售单可选最大产品数为100条</span>
                            </h3>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">供应商编号</label>
                                <div class="col-sm-4">
                                    <input name="lastname" class="form-control" type="text" readonly v-model="edit.supplierCode">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">供应商名称</label>
                                <div class="col-sm-4">
                                    <input name="firstname" class="form-control" type="text" v-model="edit.supplierName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系人</label>
                                <div class="col-sm-4">
                                    <input name="lastname" class="form-control" type="text"  v-model="edit.contactName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系电话</label>
                                <div class="col-sm-4">
                                    <input name="lastname" class="form-control" type="text" v-model="edit.supplierPhone">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">期初欠款</label>
                                <div class="col-sm-4">
                                    <input name="lastname" class="form-control amount" type="text" v-model="edit.supplierDebt | money">
                                </div>
                                <label class="col-sm-2 control-label">供应商等级</label>
                                <div class="col-sm-4">
                                    <select v-select2 id="supplier_level" v-model="edit.supplierLevel">
                                        <option v-for="item in customerList" v-bind:value="item.Value" v-bind:selected="$index===0" v-text="item.Text"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系地址</label>
                                <div class="col-sm-9">
                                    <textarea id="ccomment" name="comment" class="form-control" style="height: 65px;"  v-model="edit.supplierAddress"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">供应商状态</label>
                                <div class="col-sm-4" style="margin-top:7px">
                                    <input type="radio" class="cus-radio" name="status" v-bind:value="0" v-model="edit.supplierStatus"><span class="spanchk">启用</span>
                                    <input type="radio" class="cus-radio" name="status" v-bind:value="1" v-model="edit.supplierStatus"> <span class="spanchk">禁用</span>
                                </div>
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-4" style="margin-top:7px">
                                    <input type="radio" class="cus-radio" name="sex" v-bind:value="0" v-model="edit.supplierSex"><span class="spanchk">男</span>
                                    <input type="radio" class="cus-radio" name="sex" v-bind:value="1" v-model="edit.supplierSex"> <span class="spanchk">女</span>
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">附属信息</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">业务员</label>
                                <div class="col-sm-3">
                                    <select id="relatedSalesman" v-model="edit.relatedSalesman">
                                        <option v-for="item in warehouseList" v-bind:value="item.Value" 
                                            v-text="item.Text"></option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label">单位电话</label>
                                <div class="col-sm-3">
                                    <input class="form-control" type="text" v-model="edit.supplierUnitPhone">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">微信</label>
                                <div class="col-sm-3">
                                    <input class="form-control" type="text" v-model="edit.supplierWechat">
                                </div>
                                <label class="col-sm-2 control-label" >传真</label>
                                <div class="col-sm-3">
                                    <input class="form-control" type="text" v-model="edit.supplierFax">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" >邮编</label>
                                <div class="col-sm-3">
                                    <input class="form-control" type="text" v-model="edit.supplierPostCode">
                                </div>
                                <label class="col-sm-2 control-label" v-model="edit.supplierEmail">邮箱</label>
                                <div class="col-sm-3">
                                    <input class="form-control" type="text" v-model="edit.supplierEmail">
                                </div>
                            </div>
                            <div class="form-group">
                                
                            </div>
                            <div>
                                <h3 class="panel-title">其他信息</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">备注</label>
                                <div class="col-sm-10">
                                    <textarea id="ccomment" name="comment" class="form-control" style="height: 65px;"  v-model="edit.supplierRemark"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div slot="footer" style="text-align:center">
                        <a href="javascript:;" class="revision-btn" v-on:click="submit()"> 保存</a>
                        <a href="javascript:;" class="revision-btn-default" v-on:click="this.addModal.close()"> 取消</a>
                    </div>
                </modal>
                <!-- 供应商详情 -->
                <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
                    <h4 slot="header">详情</h4>
                    <div slot="body" class="clearfix">
                        <div class="approve-detail-modal-title">
                            <h2>供应商详情</h2>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>供应商编号</em>
                                <span v-text="detail.supplierCode"></span>
                            </li>
                            <li>
                                <em>创建时间</em>
                                <span v-text="detail.createdDate"></span>
                            </li>
                            <li>
                                <em>创建人</em>
                                <span v-text="detail.createAuthor"></span>
                            </li>
                            <li>
                                <em>客户来源</em>
                                <span v-text="detail.relatedSalesman"></span>
                            </li>
                            <li>
                                <em>用户状态</em>
                                <span class="amount" v-text="detail.supplierStatus==0?'启用':'禁用'" v-bind:class="detail.supplierStatus==0?'text-navy':'text-danger'"></span>
                            </li>
                            <li class="w-100">
                                <em>备注</em>
                                <span v-text="detail.supplierRemark">湖东老赖</span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">基本信息 </h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>供应商姓名</em>
                                <span v-text="detail.supplierName"></span>
                            </li>
                            <li>
                                <em>性别</em>
                                <span v-text="detail.supplierSex==0?'男':'女'"></span>
                            </li>
                            <li>
                                <em>客户等级</em>
                                <span v-text="detail.supplierLevel">金牌</span>
                            </li>
                            <li>
                                <em>联系人</em>
                                <span v-text="detail.contactName">方老板小蜜</span>
                            </li>
                            <li>
                                <em>联系电话</em>
                                <span v-text="detail.supplierPhone">1888888888</span>
                            </li>
                            <li>
                                <em>期初欠款</em>
                                <span class="amount" v-text="detail.supplierDebt | money">800,0.00</span>
                            </li>
                            <li class="w-100">
                                <em>联系地址</em>
                                <span v-text="detail.supplierAddress">盈云软件网络科技股份有限公司120台按摩器</span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">附属信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>单位电话</em>
                                <span v-text="detail.supplierUnitPhone"></span>
                            </li>
                            <li>
                                <em>传真</em>
                                <span v-text="detail.supplierFax"></span>
                            </li>
                            <li>
                                <em>邮编</em>
                                <span v-text="detail.supplierPostCode"></span>
                            </li>
                            <li>
                                <em>邮箱</em>
                                <span v-text="detail.supplierEmail"></span>
                            </li>
                            <li>
                                <em>微信</em>
                                <span v-text="detail.supplierWechat"></span>
                            </li>
                        </ul>
                    </div>
                </modal>
                <!-- 提示框 -->
                <modal v-ref:confirm v-bind:show.sync="confirm.show" v-bind:style="confirm.styleMin"
                    v-bind:before-close="confirm.beforeClose" v-bind:init="confirm.init" class="tips-modal">
                    <h4 slot="header">确认</h4>
                    <div slot="body">
                        <div id="confirmInvoiceTxt" v-html="confirm.Msg||''"></div>
                    </div>
                    <div slot="footer">
                        <a class="revision-btn width80" href="javascript:;" v-on:click="confirm.callBack($event)">确定</a>
                        <a class="revision-btn-default width80" href="javascript:;" v-on:click="confirm.cancelcallBack">取消</a>
                    </div>
                </modal>
                <!-- alert -->
                <modal class="tips-modal" v-ref:alert v-bind:show.sync="alert.show" v-bind:style="alert.styleMin" v-bind:before-close="alert.beforeClose" v-bind:init="alert.init" v-bind:inner-scroll="alertObj.innerScroll">
                    <h4 slot="header">提示信息</h4>
                    <div slot="body">
                        <div id="confirmInvoiceTxt" v-html="alert.Msg||''"></div>
                    </div>
                    <div slot="footer">
                        <a class="revision-btn" href="javascript:;" v-on:click="alert.func">确定</a>
                    </div>
                </modal>
            </div>
        </div>
    </div>
    <script src="../content/js/lib/vue/vue.min.js"></script>
    <script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../content/static/js/plugins/iCheck/icheck.min.js"></script>
    <script src="../content/static/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../content/js/lib/calendar/calendar.js"></script>
    <script src="../content/js/lib/calendar/scrollbar.js"></script>
    <script src="../content/js/lib/vue/vue-modal.js"></script>
    <script src="../content/js/lib/vue/vue-paginationbetter.js"></script>
    <script src="../content/js/common.js"></script>
    <script src="../content/js/lib/vue/select2.js"></script>
    <script type="text/javascript">
        $(function () {});
        $("#warehouse").select2({
            width: "220px"
        });
        $("#status").select2({
            width: "220px"
        });
        $("#approveStatus").select2({
            width: "220px"
        });
        var vmData = {
            detailModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
            addModal: {
                show: false,
                style: {
                    width: '680px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.addModal.show = false;
                }
            },
            modelTitle: "",
            customerList: [
                {
                    "Text": "普通客户",
                    "Value": "0",
                },
                {
                    "Text": "一级客户",
                    "Value": "1",
                },
                {
                    "Text": "二级客户",
                    "Value": "2",
                },
                {
                    "Text": "三级客户",
                    "Value": "3",
                },
                {
                    "Text": "四级客户",
                    "Value": "4",
                }
            ],
            backStatusList: [
                {
                    "Text": "全部",
                    "Value": "553",
                },
                {
                    "Text": "未归还",
                    "Value": "360",
                }, {
                    "Text": "已归还",
                    "Value": "365",
                },
                {
                    "Text": "转销售",
                    "Value": "4105",
                }
            ],
            warehouseList: [
                {
                    "Text": "北京",
                    "Value": "553",
                },
                {
                    "Text": "上海",
                    "Value": "360",
                }, {
                    "Text": "大西洋大西洋大西洋大西洋大西洋大西洋大西洋",
                    "Value": "365",
                },
                {
                    "Text": "广州",
                    "Value": "4105",
                }, {
                    "Text": "北冰洋",
                    "Value": "510",
                },
                {
                    "Text": "深圳",
                    "Value": "3219",
                },
                {
                    "Text": "天津",
                    "Value": "99402",
                },
                {
                    "Text": "合肥",
                    "Value": "519",
                },
                {
                    "Text": "苏州",
                    "Value": "518",
                },
                {
                    "Text": "南京",
                    "Value": "517",
                },
                {
                    "Text": "无锡",
                    "Value": "525",
                },
                {
                    "Text": "大东北",
                    "Value": "528",
                },
                {
                    "Text": "大西北",
                    "Value": "533",
                },
                {
                    "Text": "非洲",
                    "Value": "538",
                },
                {
                    "Text": "欧洲",
                    "Value": "537",
                },
                {
                    "Text": "南美洲",
                    "Value": "536",
                }
            ],
            modelFlag: 0,
            selectProductItem: [],
            accountList: [
                {
                "Text": "中国银行",
                "Value": "1",
            }, {
                "Text": "建设银行",
                "Value": "2",
            }, {
                "Text": "农业银行",
                "Value": "3",
            }, {
                "Text": "工商银行",
                "Value": "4",
            }, {
                "Text": "现金",
                "Value": "5",
            }, ],
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {
                vm.$set('PageSearch', vm.searchData);
                vm.searchData();
            },
            //查询
            searchData: function (flag){
                if (flag === 1) {
                    vm.$set("pageObj.pageNumber", 1);
                }
                let url = 'supplier/list';
                var sendData = {
                    //phoneNo:"1",
                };
                vm.PageAajx(url, sendData);
            },
            detailShow: function (obj) {
                vm.detailModal.show = true;
                let ajaxParam = {
                    url: "supplier/detail/" + obj
                };
                this.RequestGetAajx(ajaxParam, function (e) {
                    if (e.status == 200 && e.data) {
                        vm.$set('detail', e.data.supplier);
                    }
                });
            },
            addShow: function (obj) {
                vm.addModal.show = true;
                if (obj != undefined) {
                    let ajaxParam = {
                        url: "supplier/detail/" + obj
                    };
                    this.RequestGetAajx(ajaxParam, function (e) {
                        if (e.status == 200 && e.data) {
                            vm.$set('edit', e.data.supplier);
                        }
                    });
                } else {
                    vm.$set('edit', {});
                }
                vm.$nextTick(function () {
                    $("#supplier_level").select2({width: "133px"}).trigger('change');
                    $("#relatedSalesman").select2({width: "133px"}).trigger('change'); //初始化
                });
            },
            submit:function(){
                if (vm.validateAndFormat()) return false;
                let param=vm.edit;
                param.supplierLevel=$("#supplier_level").val();
                param.relatedSalesman= $("#relatedSalesman").val();
                debugger;
                vm.Confirm('确认提交？', function () {
                    let ajaxParam = {
                        url: "supplier/insert/",
                        param:param
                    };
                    vm.RequestPostAajx(ajaxParam, function (e) {
                        debugger;
                        if (e.status == 200) {
                            vm.addModal.show=false;
                            vm.searchData();
                        }
                        else{
                            vm.Alert("保存失败，请联系管理员！");
                            return false;
                        }
                    });
                });
            },
            delete:function(obj){
                vm.Confirm('确认删除当前供应商？', function () {
                    var param={
                        _method:'delete'
                    }
                    let ajaxParam = {
                        url: "supplier/delete/" + obj,
                        param:param
                    };
                    vm.RequestDeleteAjax(ajaxParam, function (e) {
                        debugger;
                        if (e.status == 200) {
                            vm.searchData();
                        }
                    });
                });
            },
            validateAndFormat:function() {
                if(vm.edit.supplierName==''||vm.edit.supplierName==undefined)
                {
                    vm.Alert("请填写供应商名称！");
                    return false;
                }
                if(vm.edit.contactName==''||vm.edit.contactName==undefined)
                {
                    vm.Alert("请填写联系人！");
                    return false;
                }
                if(vm.edit.supplierPhone==''||vm.edit.supplierPhone==undefined)
                {
                    vm.Alert("请填写联系电话！");
                    return false;
                }
            },
        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>